<template>
  <div class="resume-container">
    <el-row>
      <el-header>
        <input
          class="input_dash"
          v-model="resumeTitle"
          @change="dataChange"
          ref="resumeTitleRef"
        />
        <i class="el-icon-edit" @click="editResumeTitle"></i>
      </el-header>
    </el-row>
    <el-row>
      <el-col :span="8" class="aside">
        <Aside></Aside>
      </el-col>
      <el-col :span="16" class="main-page">
        <main-page></main-page>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import MainPage from '@/components/MainPage/MainPage.vue'
import Aside from '@/components//MainPage/Aside.vue'
import { mapGetters } from 'vuex'
export default {
  name: 'ResumeView',
  data() {
    return {
      resumeTitle: '应聘岗位_姓名_学历_经验',
    }
  },
  methods: {
    dataChange() {
      this.$store.commit('setResumeTitle', this.resumeTitle)
    },
    editResumeTitle() {
      this.$refs.resumeTitleRef.focus()
    },
  },
  computed: {
    ...mapGetters(['myResumeTitle']),
  },
  created() {
      this.resumeTitle = this.myResumeTitle
  },
  components: {
    MainPage,
    Aside,
  },
}
</script>

<style lang="less" scoped>
.resume-container {
  background-color: rgb(22, 25, 30);
}
.el-header {
  background-color: rgb(55, 65, 78);
  padding: 0;
  position: fixed;
  top: 0;
  width: 100%;
  color: rgb(120, 134, 154);
  text-align: center;
  line-height: 60px;
  height: 60px;
  z-index: 99;
}
.resume-title {
  margin: 0 auto;
  width: 400px;
  background-color: transparent;
  display: none;
}
.el-aside {
  position: fixed;
  top: 0;
  height: 100%;
  padding-top: 60px;
  background-color: rgb(40, 47, 57);
  text-align: center;
  line-height: 200px;
}
.el-main {
  color: #333;
  text-align: center;
  line-height: 60px;
  padding: 0;
  background-color: rgb(22, 25, 30);
}
.main-page {
  margin: 0 auto;
  float: right;
}
.aside {
  position: fixed;
}

.input_dash {
  height: 30px;
  line-height: 30px;
  font-size: 20px;
  color: white;
  padding: 5px;
  border-width: 0ch;
  text-align: left;
  background-color: transparent;
  margin-right: 5px;
}
.input_dash:focus {
  background: none;
  outline: none;
  border: 0px;
  padding: 5px;
  border-color: tomato;
  border-width: 1px;
  border-style: dotted;
}
</style>
